<script setup lang="ts">
import Chat from "@/components/Chat/chat.vue";
import ChatInput from "@/components/ChatInput/ChatInput.vue";
import FullPage from "@/components/Layout/FullPage.vue";
import IgnoreChance from "@/components/Popup/IgnoreChance.vue";
import Lnkyeah from "@/utils/lnkyeah";

import { ref, onMounted, onUnmounted } from "vue";
import useIndex from "./hooks";
import Head from "@/components/Head/head.vue";

const {
  ignoreChance,
  tabItem,
  chats,
  hotMessage,
  conversationChat,
  getConversationHistory,
  onSendMessage,
  onGetAudio,
  onSetHotMessage
} = useIndex();

onUnmounted(() => {
  Lnkyeah.instance.socket?.off("chat_text");
  Lnkyeah.instance.socket?.off("chat_text_end");
  conversationChat.value = null;
});
onMounted(async () => {
  if (Lnkyeah.instance.socket?.active) {
    Lnkyeah.instance.socket.off("chat_text");
    Lnkyeah.instance.socket.off("chat_text_end");

    Lnkyeah.instance.socket.on("chat_text", (e: any) => {
      if (conversationChat.value) {
        conversationChat.value!.robot.msg += e.text;
      }
    });
    Lnkyeah.instance.socket.on("chat_text_end", () => {
      const chatInset = conversationChat.value;
      if (chatInset) {
        chats.value.push({
          msg: chatInset.robot.msg as string,
          question: chatInset.user.question as string,
          answer_list: [
            {
              content: chatInset.robot.msg as string,
              msg_type: 1
            }
          ]
        });
        if (conversationChat.value) {
          //@ts-ignore
          conversationChat.value = null;
        }
      }
    });
  }
});
const showBottomHot = ref(false);
</script>

<template>
  <Head
    arrow-color="#fff"
    name-color="#fff"
    :name="tabItem?.nickname"
    :avatar="tabItem?.avatar_image"
    class="head"
    type="level_3"
  ></Head>
  <FullPage
    scroll
    class="page"
    :pageStyle="`background-image: url(${tabItem?.avatar_image});background-size: cover; background-position: center;background-color:#ccc;`"
  >
    <Chat
      placeholder="80rpx"
      user-bubble-bg-color="#fff"
      user-bubble-text-color="#333"
      robot-bubble-bg-color="rgba(51, 51, 51, 0.8)"
      robot-bubble-text-color="#DDDDDD"
      userText
      :show-hot="false"
      :chats="chats"
      :conversation-chat="conversationChat"
      @robot-play="onGetAudio"
      @load-more="
        () => {
          showBottomHot = false;
          getConversationHistory(tabItem.id);
        }
      "
      @scroll-bottom="showBottomHot = true"
      @select="onSetHotMessage"
    ></Chat>
    <template #footer>
      <ChatInput
        theme="black"
        :message="hotMessage"
        @sendMessage="onSendMessage"
      />
    </template>
  </FullPage>
  <IgnoreChance ref="ignoreChance"> </IgnoreChance>
</template>

<style lang="scss" scoped>
::v-deep .robot-bubble {
  .text {
    background: rgba(51, 51, 51, 0.8);
  }
}
::v-deep .user-bubble {
  .text {
    background: #ffffff;
    color: #333333;
  }
}

::v-deep .vuepress-markdown-body {
  color: #dddddd;
}
.head {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10rpx 0;
}
.page {
  background-size: cover;
  background-position: center;
  background-color: #333;
}
.icon_close {
  width: 40px;
  height: 40px;
  background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/icon_close.png");
  background-size: cover;
  margin: 10px auto 0;
}
.chance {
  text-align: center;
  background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/bg_评价律师.svg");
  width: 327px;
  height: 272px;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-top: 32px;
  .title {
    color: #19191c;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 16px;
    .light {
      color: #4048fd;
    }
  }
  .desc {
    color: #6c6d7b;
    font-size: 18px;
    margin-bottom: 24px;
    letter-spacing: 4px;
    line-height: 30px;
  }
}
.icon {
  width: 40rpx;
  height: 40rpx;
  flex-shrink: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
